<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="search">
      <el-form ref="form" :inline="true" :model="search">
        <!-- 工单编号 -->
        <el-form-item label="工单编号:" size="medium">
          <el-input v-model="form.name" type="number" clearable placeholder="请输入" />
        </el-form-item>
        <!-- 工单状态 -->
        <el-form-item label="工单状态:" size="medium">
          <el-select v-model="form.region" clearable placeholder="请选择">
            <el-option label="待办" value="isWait" />
            <el-option label="进行" value="isDoing" />
            <el-option label="取消" value="isCancel" />
            <el-option label="完成" value="isDone" />
          </el-select>
        </el-form-item>
        <el-button type="primary" class="my-primary1" icon="el-icon-search">查询</el-button>
      </el-form>
    </div>

    <!-- 表单区域 -->
    <div class="result">
      <!-- 头部 -->
      <el-row class="operation">
        <el-button type="primary" class="my-primary2" icon="el-icon-circle-plus-outline">新建
        </el-button>
      </el-row>
      <!-- 表单主体 -->
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          :index="(index)=>(search.pageIndex-1)*10+(index+1)"
          label="序号"
          width="80"
        />
        <el-table-column
          prop="taskCode"
          label="工单编号"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
        />
        <el-table-column
          prop="taskType.typeName"
          label="工单类型"
        />
        <el-table-column
          prop="createType"
          label="工单方式"
        />
        <el-table-column
          prop="taskStatusTypeEntity.statusName"
          label="工单状态"
        />
        <el-table-column
          prop="userName"
          label="运营人员"
        />
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="160"
        />
        <el-table-column
          label="操作"
          width="100"
        >
          <template v-slot="{ row }">
            <el-button type="text" class="el-button--primary-text" @click.native="showTaskInfo(row.taskId)">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表单底部 -->
      <div class="pagination-container">
        <el-pagination
          layout="slot,prev,next"
          :current-page.sync="search.pageIndex"
          prev-text="上一页"
          next-text="下一页"
          @current-change="changePage"
        >
          <template order="-1">
            <span
              class="el-pagination__total"
            >共{{ totalCount }}条记录 第 {{ search.pageIndex }}/{{
              totalPage
            }}
              页</span>
          </template>
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { getTaskList } from '@/api/taskservice'
export default {
  name: 'BusinessContainer',
  data() {
    return {
      search: {
        pageIndex: 1,
        pageSize: 10,
        isRepair: false,
        taskCode: '',
        status: ''
      },
      form: {},
      tableData: [],
      totalCount: 0,
      totalPage: 0
    }
  },
  created() {
    this.getTaskList()
  },
  methods: {
    async getTaskList() {
      const { currentPageRecords, totalCount, totalPage } = await getTaskList({ ...this.search })
      this.totalPage = totalPage
      this.totalCount = totalCount
      // console.log(res)
      // 遍历数组处理数据
      this.tableData = currentPageRecords.map(item => {
        item.createType = item.createType ? '手动' : '自动'
        item.createTime = moment(item.createTime).format('YYYY.MM.DD HH:mm:ss')
        return item
      })
      this.totalCount = totalCount
      this.totalPage = totalPage
    },
    showTaskInfo(id) {
      console.log(id)
    },
    changePage(newPage) {
      this.search.pageIndex = newPage
      console.log(newPage)
      this.getTaskList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/common.scss';
.el-form-item {
  margin-bottom: 0;
}
::v-deep .el-form-item__label {
  font-weight: normal;
}

</style>
